<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://lib.baomitu.com/socket.io/2.4.0/socket.io.js"></script>
    <script src="http://lib.baomitu.com/echarts/3.8.5/echarts.min.js"></script>
</head>

<body>

    <div id="main" style="width:800px;height:400px;margin:20px auto"></div>


    <script type="text/javascript">

        var echart = echarts.init(document.getElementById("main"))
        //图形配置，条形图
        var option;

        option = {
            title: {
                text: '展示1分钟内当前IP用户访问数Top10，榜单要每10秒刷新一次',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: 'IP访问数统计',
                    type: 'bar',
                    data: []
                },

            ]
        };




        // 和服务器建立长连接
        var socket = io.connect('http://127.0.0.1:3000?groupid=1');
        //发送消息至服务端
        socket.emit('clientMsg', 'clientMsg');
        // 接收服务器返回的信息
        socket.on('serverMsg', function (data) {
            city = data.city
            cnts = data.cnts
            console.log(cnts)
            console.log(option.series[0].data)
            option.series[0].data = cnts
            option.yAxis.data = city
            echart.setOption(option)
        });


    </script>


</body>

</html>